
<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref(false)
const age = ref(18)
</script>

<!-- 结构 -->
<template>
  <div>
    <button @click="isShow = !isShow">切换图片显示</button>
  </div>
  <h2>v-show</h2>
  <!-- v-show的本质 是通过修改样式的方式（display：none）控制显示隐藏，元素始终在页面上存在 -->
  <img
    v-show="isShow"
    src="https://ts2.cn.mm.bing.net/th?id=ORMS.61813150e1a47420d39831b9bb4bb760&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
    alt=""
  />
  <h2>v-if</h2>
  <!-- v-if 的本质 从页面中移除或者添加dom元素（比较耗费性能，频繁切换的元素推荐用v-show） -->
  <img
    v-if="isShow"
    src="https://ts2.cn.mm.bing.net/th?id=ORMS.61813150e1a47420d39831b9bb4bb760&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
    alt=""
  />
  <button @click="age += 2">成长：{{ age }}</button>
  <h3 v-if="age < 5">wan</h3>
  <!-- v-else-if 及 v-else不能单独使用需要结合v-if -->
  <h3 v-else-if="age >= 5 && age < 18">wangba</h3>
  <h3 v-else>haishiqu</h3>
</template>

<!-- 样式 -->
<style scoped>
img {
  width: 200px;
  height: 200px;
}
</style>